<!DESCRIPTION>Want to add a short sound effect to your page for certain actions, such as when the user moves the mouse over a link? This is a simple yet versatile script that lets you do just like! Relying on IE's BGSOUND attribute (and hence IE5+ only), the script can easily add a sound effect to a single item (ie: 1 link), or thanks to a helper function, all items of the specified element (ie: all <a> tags). This makes it very easy to add a sound effect to an entire menu's links, for example.
<!/DESCRIPTION>
<!CATEGORY>other<!/CATEGORY>
<!SCRIPT>
<!-- START OF SCRIPT -->
<!-- Step 1: Add the below script to the <HEAD> section of your page, and change "var soundfile" to point to where your sound file is located. -->
function bindsound(tag, soundfile, masterElement){
if (!window.event) return
var source=event.srcElement
while (source!=masterElement && source.tagName!="HTML"){
if (source.tagName==tag.toUpperCase()){
playsound(soundfile)
break
}
source=source.parentElement
}
}
</script>
<!-- Step 2: Set up an element to receive the JavaScript sound, whether onMouseover, onClick etc. For example, the below plays a sound when the mouse moves over a link:
<a href="#" onMouseover="playsound('different.wav')">Example 2</a>The second line shows that you can pass in a different wav file to play for any link other than the default specified within the script (var soundfile).
Adding a JavaScript sound to all elements of the specified type
Now, here's something you might appreciate. Thanks to an additional function included in the script, you can add the sound effect easily to all elements of a certain type (ie: links) on the page or within a certain container. So lets say you wish to add a sound to all the links within your menu, which consists of 20 links. Instead of having to add the "onMouseover" code to all 20 links, you can just specify one single onMouseover event. The below shows how:
</div>This way, all links within the DIV will play a sound onMouseover. To apply the sound to all links on your page, for example, just add the onMouseover code to the <BODY> tag itself.
Function "bindsound()" accepts 3 parameters- 1) The tag name of the element to bind the sound to ("A" for <a>, "SPAN" for <span> etc), 2) the sound file to play, whether a variable or path to sound file, and finally, 3), the keyword "this", which should never be modified.
-->
<!-- END OF SCRIPT -->
<!/SCRIPT>
<!PREVIEW>
<!-- START OF SCRIPT -->
<!-- Step 1: Add the below script to the <HEAD> section of your page, and change "var soundfile" to point to where your sound file is located. -->
function bindsound(tag, soundfile, masterElement){
if (!window.event) return
var source=event.srcElement
while (source!=masterElement && source.tagName!="HTML"){
if (source.tagName==tag.toUpperCase()){
playsound(soundfile)
break
}
source=source.parentElement
}
}
</script>
<!-- Step 2: Set up an element to receive the JavaScript sound, whether onMouseover, onClick etc. For example, the below plays a sound when the mouse moves over a link:
<a href="#" onMouseover="playsound('different.wav')">Example 2</a>The second line shows that you can pass in a different wav file to play for any link other than the default specified within the script (var soundfile).
Adding a JavaScript sound to all elements of the specified type
Now, here's something you might appreciate. Thanks to an additional function included in the script, you can add the sound effect easily to all elements of a certain type (ie: links) on the page or within a certain container. So lets say you wish to add a sound to all the links within your menu, which consists of 20 links. Instead of having to add the "onMouseover" code to all 20 links, you can just specify one single onMouseover event. The below shows how:
</div>This way, all links within the DIV will play a sound onMouseover. To apply the sound to all links on your page, for example, just add the onMouseover code to the <BODY> tag itself.
Function "bindsound()" accepts 3 parameters- 1) The tag name of the element to bind the sound to ("A" for <a>, "SPAN" for <span> etc), 2) the sound file to play, whether a variable or path to sound file, and finally, 3), the keyword "this", which should never be modified.
